<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Do More research on this! 
           <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    https://www.npmjs.com/package/jquery -->
    <script type="text/javascript" src="./demo.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>
        DEMO
    </title>
    
</head>
<body>
    <p>When you click on a button below, a new entry should appear in the list below with a coresponding number.</p>

<p><b>For example:</b> Clicking on <b>A</b> should create an entry <b>1</b>, <b>B</b> should create an entry <b>2</b> and etc.</p>

<p>You should only edit the code withing the designated zone!</p>

<button>A</button>
<button>B</button>
<button>C</button>

<ul></ul>

</body>
</html>
